/*
    这个文件专门放登录页面的样式
*/


.login-container {
    /**/
    width: 100%;
    /*
        这里的高度与之前同理 ，需要去掉导航栏的高度
    */
    height: calc(100% - 50px);

    /*
        暂时设置一个 背景颜色 方便观察效果
    */
    /*background-color: rgb(128, 0, 0);*/

    /*
        开启弹性布局 (为了让对话框能够 垂直水平居中 使用弹性布局)
    */
    display: flex;

    /*
        水平居中
    */
    justify-content: center;

    /*
        垂直居中
    */
    align-items: center;

}

.login-dialog {

    width: 400px;

    height: 380px;

    /*background-color: rgb(0, 180, 0);*/
    background-color: rgba(255, 255, 255, 0.6);

    border-radius: 15px;

}

/*
    标题
*/
.login-dialog h3 {
    /*
        文字居中
    */
    text-align: center;

    /*
        设置 内边距 : 上下 为 50px 左右为 0
    */
    padding: 50px 0;
}

.login-dialog .row {

    height: 50px;
    /*
        开启弹性布局
    */
    display: flex;

    /*
        水平居中
    */
    justify-content: center;

    /*
        垂直居中
    */
    align-items: center;
}

input {
    outline-style: none;
    border: 1px solid #c0c4cc;
    border-radius: 5px;
    width: 60%;
    height: 60%;
    padding: 0;
    padding: 10px 15px;
    box-sizing: border-box;
    font-family: "Microsoft soft";

    &:focus {
        border-color: #f07b00;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        #f07b00;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        #f07b00;
    }
}

.login-dialog .row span {
    width: 100px;

    font-size: 22px
}

/*
    id 选择器  , 并集选择器
*/
#username, #password {
    width: 200px;
    height: 40px;
    /*
        圆角矩形
    */
    border-radius: 10px;
    /*
        去掉边框
    */
    border: none;

    /*
        放大输入框内的字体
    */
    font-size: 18px;

    /*
        内边距 : 输入框内文字与边框的内边距
    */

    padding-left: 5px;
}

#submit {
    width: 300px;
    height: 40px;
    color: white;
    background-color: cornflowerblue;
    /*
        去除边框
    */
    border: none;

    /*
        圆角矩形
    */
    border-radius: 10px;

}


/*
    伪类选择器 让鼠标点击有效果
*/

#submit:active {
    background-color: skyblue;
}

#insert {
    width: 300px;
    height: 40px;
    color: white;
    background-color: cornflowerblue;
    /*
        去除边框
    */
    border: none;

    /*
        圆角矩形
    */
    border-radius: 10px;

    text-align: center;

    line-height: 40px;


}


#insert:active {
    background-color: skyblue;

}

.login-dialog .a {

    text-align: left;

    padding-left: 47px;

    color: #777777;

    padding-top: 12px;
}


